<template>
	<div class="container">
		<el-form ref="loginForm" :model="formData" :rules="rules" label-width="auto" hide-required-asterisk>
			<h2>十方智育——后台登录</h2>
			<el-form-item label="账 号" prop="username">
				<el-input v-model="formData.username" placeholder="请输入账号" :prefix-icon="Avatar" />
			</el-form-item>
			<el-form-item label="密 码" prop="password">
				<el-input v-model="formData.password" placeholder="请输入密码" :prefix-icon="Lock" show-password />
			</el-form-item>
			<div class="buttonContainer">
				<el-form-item>
					<el-button type="primary" class="loginButton" @click="submitForm(loginForm)">登录</el-button>
					<el-button class="resetButton" @click="resetForm(loginForm)">取消</el-button>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
	import { getCurrentInstance, reactive, ref } from 'vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import { Avatar, Lock } from '@element-plus/icons-vue'
	import { ElMessage } from 'element-plus'
	import { useRouter } from 'vue-router'

	const router = useRouter()
	const loginForm = ref<FormInstance>()
	const formData = reactive({
		username: '',
		password: '',
	})

	const rules = reactive({
		username: [
			{ required: true, message: '账号不能为空', trigger: 'blur' },
			{ min: 4, max: 20, message: '账号必须是4到20位', trigger: 'blur' },
		],
		password: [
			{ required: true, message: '密码不能为空', trigger: 'blur' },
			{ min: 6, message: '密码至少是6位', trigger: 'blur' },
		],
	})
	const axios = getCurrentInstance().appContext.config.globalProperties.axios
	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				axios.post(
					'http://localhost:8080/admin',
					{
						username: formData.username,
						password: formData.password,
					}
				).then((resp) => {
					if (resp.code === 200) {
						console.log("登录成功")
						sessionStorage.setItem('loginUser', JSON.stringify(resp.data))
						router.replace('/index')
					} else {
						ElMessage.error('输入的账号和密码有误')
					}
				}).catch((error) => {

					ElMessage.error('登录请求失败，请稍后重试')
					console.error('登录请求异常:', error)
				})
			} else {
				ElMessage.error('请输入正确的账号和密码')
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		background: url('../assets/sfzy背景图片.jpg') no-repeat center;
		background-size: cover;
		position: relative;
	}

	.el-form {
		width: 600px;
		background: rgba(157, 254, 214, 0.5);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 30px 50px;
		border-radius: 20px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.el-form h2 {
		text-align: center;
	}

	.buttonContainer {
		display: flex;
		justify-content: center;
	}

	.loginButton {
		background-color: greenyellow;
		border: 0px;
		color: black;
	}

	.resetButton {
		background-color: aqua;
		border: 0px;
		color: black;
	}
</style>